<template>

  <el-form label-width="70px" :inline="true" class="login_container" :model="form" :rules="rules">
	  
	  <div class="login_title">
		  <span>
			  <img style="width: 70px;height: 50px;" src="@/assets/images/bgc.png" />
		  </span>
		  
		  <span style="height: 50px;line-height: 34px;">专业分包报价系统用户登录</span>
	  </div>
	  <el-form-item label="用户名" prop="username">
		  <el-input v-model="form.username" placeholder="请输入账号"></el-input>
	  </el-form-item>
	  <el-form-item label="密码" prop="password">
	  	  <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
	  </el-form-item>
	  <el-form-item>
	  	  <el-button @click="submit" type="primary">登录</el-button>
	  </el-form-item>
	  
  </el-form>

</template>

<script>
	import Cookies from 'js-cookie'
	import {
		login,getUserInfo
	} from '@/api/user.js'
	import { mapMutations } from 'vuex'
	export default {
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
				rules: {
					username: [
						{ required: true,trigger: 'blur', message: '请输入用户名'}
					],
					password: [
						{ required: true,trigger: 'blur', message: '请输入密码'}
					]
				}
			}
		},
		methods: {
			...mapMutations(['saveToken','saveUserInfo']),
			submit() {
				this.loginUser()
			},
			async loginUser() {
				await login({
					username: this.form.username,
					password: this.form.password,
				}).then((data) => {
					if (data.status === 200) {
						Cookies.set('token',data.data.token)
						this.getUser()
						this.$router.push('/home')
					}
				}).catch((error) => {
					// console.log(error)
					this.$message.error("账号或者密码错误！")
				})
			},
			async getUser() {
				await getUserInfo({

				}).then((data) => {
					if (data.status === 200) {
						this.saveUserInfo(data.data.data)
					}
				})
			}
		}
	}
  
</script>

<style lang="less" scoped>    
	.login_container {
		width: 400px;
		border: 1px solid #eaeaea;
		margin: 180px auto;
		padding: 35px 35px 15px 35px;
		background-color: #fff;
		border-radius: 15px;
		box-shadow: 0 0 25px #cac6c6;
		box-sizing: border-box;
		.login_title {
			text-align: center;
			font-weight: bold;
			font-size: 20px;
			margin-bottom: 20px;
			color: #505458;
			
			display: flex;
			align-items: center; /* 垂直居中 */
			
		}
		.el-input {
			width: 198px;
		}
	}
</style>